<template>
  <div class="win" :class="houseData.look_status==2?'video_box':''">
    <!-- 商品精选 -->
    <div class="list" :class="houseData.look_status==2?'video_list':''" :key="index">
      <!-- 上方白色框 -->
      <div class="top" v-if="houseData.look_status==2">
        <div class="white_bj" v-if="whiteBj">
          <p class="title">{{houseData.title}}</p>
          <div class="bottom_row">
            <p class="time">{{houseData.create_time}}</p>
            <p class="writer">{{houseData.publisher}}</p>
          </div>
        </div>
        <img v-if="whiteBj" @click="whiteBjShow" :src="bjurl+'class_top_logo.png'" mode="widthFix" />
        <img v-else @click="whiteBjShow" :src="bjurl+'class_bottom_logo.png'" mode="widthFix" />
      </div>
      <div class="type_one" v-else>
        <div class="white_bj" v-if="whiteBj">
          <p class="title">{{houseData.title}}</p>
          <div class="bottom_row">
            <p class="time">{{houseData.create_time}}</p>
            <p class="writer">{{houseData.publisher}}</p>
          </div>
        </div>
      </div>
      <!-- bug 播放控件隐藏不掉 -->
      <video
        mode="widthFix"
        v-if="houseData.look_status==2"
        :id="'video'"
        :src="houseData.content"
        :object-fit="'contain'"
        :loop="true"
        :controls="false"
        :show-fullscreen-btn="false"
        :show-play-btn="false"
        :play-btn-position="'center'"
        :show-center-play-btn="false"
        :enable-progress-gesture="true"
        @play="videoPlay()"
        @pause="videoPause()"
        @click="videoCk()"
        class="video"
      >
        <img class="play_btn" v-show="playStatus" src="/static/img/video_play_icon.png" alt />
      </video>
      <div v-else class="content_box">
        <wxParse :content="houseData.content" />
      </div>
      <div class="bottom" v-if="houseData.look_status==2">
        <div class="houseData">
          <button @click="hr_goodsDetail">去下单</button@>
          <img :src="houseData.image" />
          <div class="houseData_right_box">
            <P class="name ellipsis2">{{houseData.name}}</P>
            <div class="row_box">
              <div class="tips_box">
                <p
                  :class="ite=='包邮'?'blue':'green'"
                  v-for="(ite, k) in houseData.label"
                  :key="k"
                >{{ite}}</p>
              </div>
            </div>
            <div class="money_box">
              <p class="money">￥{{houseData.sale_price}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom houseData_one" v-else>
        <div class="houseData">
          <button @click="hr_goodsDetail">去下单</button>
          <img :src="houseData.image" />
          <div class="houseData_right_box">
            <p class="name ellipsis2">{{houseData.name}}</p>
            <div class="row_box">
              <div class="tips_box">
                <p
                  :class="ite=='包邮'?'blue':'green'"
                  v-for="(ite, l) in houseData.label"
                  :key="l"
                >{{ite}}</p>
              </div>
            </div>
            <div class="money_box">
              <p class="money">￥{{houseData.sale_price}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class></div>
    <i-toast id="toast" />
  </div>
</template>

<script>
import wxParse from "mpvue-wxparse";
export default {
  data() {
    return {
      whiteBj: true, //顶部白条开启关闭
      bjurl: "",
      playStatus: true,
      houseData: {}, //课程详细
      course_id: 0 //课程ID
    };
  },
  methods: {
    //请求接口课程接口
    getCourseDetail() {
      this.$ajax("/home/course/course_detail", "post", {
        course_id: this.course_id
      })
        .then(res => {
          
          if (res.status) {
            this.houseData = res.data;
          } else {
          }
        })
        .catch(err => {});
    },
    //顶部白条开启关闭
    whiteBjShow() {
      if (this.whiteBj == true) {
        this.whiteBj = false;
      } else this.whiteBj = true;
    },
    // 点击视频,控制视频的播放暂停
    videoCk() {
      let videoContext = wx.createVideoContext("video");
      if (this.playStatus) {
        this.playStatus = false;
        videoContext.play();
        this.$forceUpdate();
      } else {
        this.playStatus = true;
        videoContext.pause();
        this.$forceUpdate();
      }
    },
    // 视频播放时触发事件
    videoPlay() {
      this.playStatus = false;
      this.$forceUpdate();
    },
    // 视频暂停时触发事件
    videoPause() {
      this.playStatus = true;
      this.$forceUpdate();
    },
    // 商品跳转
    hr_goodsDetail() {
      wx.navigateTo({
        url: "../goodsDetail/main?pro_id=" + this.houseData.pro_id + "&type=" + 1
      });
    }
  },
  components: {
    wxParse
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.playStatus = this.playStatus;
    this.whiteBj = this.whiteBj;
    this.course_id = e.course_id;
    this.getCourseDetail();
    this.videoCk();
  },
  onShareAppMessage: function() {
    return {
      title: "转发",
      path: "/pages/houseDataPick/index",
      success: function(res) {}
    };
  }
};
/* 
    有该商品的传该商品的下单信息,没有则传所有商品的.再没有就放假数据
*/
let number = [{}, {}];
</script>

<style lang="scss" scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
.video_box {
  height: 100vh;
}
.win {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  .video_list {
    display: flex;
    align-items: center;
    height: 100vh;
    background-color: #f3f3f3;
  }
  .list {
    position: relative;
    .type_one {
      background: rgba(255, 255, 255, 1);
      .white_bj {
        background: rgba(255, 255, 255, 0.8);
        width: 750rpx;
        padding: 36rpx 30rpx 30rpx;
        .title {
          color: #4d4d4d;
          font-size: 48rpx;
        }
        .bottom_row {
          margin-top: 26rpx;
          padding-right: 50rpx;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .time {
            color: #999999;
            font-size: 24rpx;
          }
          .writer {
            font-size: 24rpx;
            color: $green;
          }
        }
      }
    }
    .top {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      .white_bj {
        background: rgba(255, 255, 255, 0.8);
        width: 750rpx;
        padding: 36rpx 30rpx 48rpx;
        .title {
          color: #4d4d4d;
          font-size: 48rpx;
        }
        .bottom_row {
          margin-top: 26rpx;
          padding-right: 50rpx;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          font-size: 30rpx;
          .time {
            color: #999999;
          }
          .writer {
            color: $green;
          }
        }
      }
      img {
        width: 206rpx;
        margin: 0 auto;
      }
    }
    .video {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
      .play_btn {
        @include abs_cen(180rpx, 180rpx);
      }
    }
    .content_box {
      position: relative;
      z-index: 1;
      padding: 0rpx 30rpx 250rpx;
    }
    .bottom {
      position: fixed;
      bottom: 20rpx;
      left: 0;
      right: 0;
      z-index: 2;
      .houseData {
        width: 690rpx;
        background-color: rgba(255, 255, 255, 0.8);
        box-sizing: border-box;
        display: flex;
        margin: 0 auto;
        position: relative;
        padding: 15rpx;
        border-radius: 20rpx;
        box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.11);
        button {
          position: absolute;
          bottom: 14rpx;
          right: 20rpx;
          width: 148rpx;
          height: 44rpx;
          line-height: 44rpx;
          color: #ffffff;
          font-size: 23rpx;
          letter-spacing: 2rpx;
          background: linear-gradient(
            0deg,
            rgba(11, 208, 94, 1),
            rgba(11, 208, 173, 1)
          );
          border-radius: 22rpx;
        }
        img {
          width: 198rpx;
          height: 198rpx; //固定高度后期修改
          border-radius: 10rpx;
        }
        .houseData_right_box {
          flex: 1;
          box-sizing: border-box;
          padding: 10rpx 12rpx 0rpx 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            width: 410rpx;
            color: #4d4d4d;
            font-size: 30rpx;
            line-height: 1.2;
            font-weight: bold;
          }
          .row_box {
            display: flex;
            align-items: flex-end;
            .tips_box {
              display: flex;
              p {
                padding: 6rpx 10rpx 7rpx;
                font-size: 18rpx;
                border-radius: 15rpx;
                margin-right: 10rpx;
              }
              .blue {
                color: #6da9ff;
                background-color: #deebff;
                border-radius: 15rpx;
                margin-right: 10rpx;
              }
              .green {
                color: #ffffff;
                background-color: $green;
              }
            }
          }
          .money_box {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            .money {
              color: $red;
              font-size: 34rpx;
            }
            .sales {
              font-size: 20rpx;
              color: #7c7c7c;
            }
          }
        }
      }
    }
    .houseData_one {
      bottom: 0;
      .houseData {
        background-color: rgba(255, 255, 255, 1);
        box-shadow: -1rpx -7rpx 8rpx 0rpx rgba(169, 169, 169, 0.14),
          -1rpx 7rpx 8rpx 0rpx rgba(169, 169, 169, 0.14);
        width: 750rpx;
        padding: 15rpx 45rpx;
        border-radius: 0rpx;
        .houseData_right_box {
          .name {
            width: 430rpx;
          }
        }
      }
    }
  }
}
</style>
